<template>
  <sky-base-page padding="0" bgPageColor="#f3f8f5">
    <view class="header-box">
      <view class="left-box">
        <view class="hello">hello!</view>
        <view class="desc">邀请你注册帮帮陌</view>
      </view>
      <image class="logo-phone" src="/static/logo.png"/>
    </view>
    <view class="form-card">
      <uni-forms class="bang-form" ref="formRef" :model="form" :rules="rules"
                 label-position="top" label-width="400rpx" err-show-type="toast">
        <uni-forms-item name="mobile" label="手机号" required>
          <view class="input-box">
            <input type="text" v-model="form.mobile" placeholder="请输入手机号"/>
          </view>
        </uni-forms-item>
        <uni-forms-item name="verificationCode" label="验证码" required>
          <view class="input-box">
            <input type="text" v-model="form.verificationCode" placeholder="请输入验证码"/>
            <view class="code-box">
              <up-code
                  ref="uCodeRef"
                  @change="codeChange"
                  seconds="60"
                  changeText="X秒重新获取"
              ></up-code>
              <up-button
                  @tap="getCode"
                  :text="tips"
                  size="mini"
                  color="#00c76a"
              ></up-button>
            </view>
          </view>
        </uni-forms-item>
        <view class="login-btn" @click="qly.form.pass(submit,formRef)">
          接受邀请
        </view>
      </uni-forms>
    </view>

  </sky-base-page>
</template>
<script setup>

const formRef = ref()
const form = ref({
  mobile: '',
  verificationCode: '',
  smsType: 'user_register'
})

const rules = {
  // 对name字段进行必填验证
  mobile: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '请输入手机号',
      },
    ],
  },
  verificationCode: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '请输入验证码',
      },
    ],
  }
}

const tips = ref('');
const value = ref('');
const uCodeRef = ref(null);
const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    });
    getVerifyCode()
  } else {
    uni.$u.toast('倒计时结束后再发送');
  }
};
// 登录
const submit = async () => {
  const res = await qly.api.auth.register(form.value)
  if (res.success) {
    qly.dialog.success('登录成功')
    await qly.auth.handleLoginResult(res)
    uni.reLaunch({
      url: '/pages/tabBar/home/index'
    })
  } else {
    qly.dialog.apiError(res).catch()
  }
}

// 获取验证码
async function getVerifyCode() {
  let res = await qly.api.common.getSmsCode({smsType: 'user_register', mobile: form.value.mobile})
  if (res.success) {
    qly.dialog.toast({title: '验证码已发送'})
    uCodeRef.value.start()
  } else {
    qly.dialog.apiError(res)
  }
}

onLoad((options) => {
  console.log('options', options)
  if (options.sellerId) {
    form.value.sellerId = options.sellerId
  }
})
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 400rpx;
  padding: 0 32rpx;
  box-sizing: border-box;

  .left-box {
    .hello {
      font-family: D-DIN-DIN, D-DIN-DIN;
      font-weight: bold;
      font-size: 80rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      color: #293845;
    }

    .desc {
      color: #293845;
      font-weight: bold;
      font-size: 34rpx;
    }
  }

  .logo-phone {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
  }
}

.form-card {
  //height: calc(100% - 460rpx);
  width: 92%;
  margin: -40rpx auto 0;
  padding: 32rpx 32rpx 140rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  background-color: #fff;
}

.bang-form {
  flex: 1;
  overflow: auto;
}

.yuan-phone {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.login-btn {
  color: #fff;
  margin-top: 96rpx;
  width: 590rpx;
  height: 96rpx;
  background: #00C76A;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 30rpx;
}

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx 0 24rpx;
  width: 100%;
  height: 80rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  font-size: 32rpx;

  .code-box {
    margin-right: 50rpx;
  }
}
</style>
